<template>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    xmlns:v="https://svgstorm.com"
    :viewBox="viewBox"
    :width="viewportWidth"
    :height="calculatedHeight"
  >
    <g :fill="color" fill-opacity="1.00" stroke="None">
      <path
        d="
M 0.00 31.00 
L 0.00 75.00
L 1616.00 75.00
C 1529.88 67.05 1450.69 29.33 1371.00 0.00
L 1051.00 0.00
C 992.18 24.48 939.22 61.56 873.78 67.78 C 808.34 73.99 748.23 34.25 697.00 0.00
L 222.00 0.00
C 156.14 37.53 75.68 38.04 0.00 31.00 Z"
      />
    </g>

    <g :fill="color" fill-opacity="1.00" stroke="None">
      <path
        d="
M 1655.00 75.00 
L 1920.00 75.00
L 1920.00 0.00
L 1826.00 0.00
C 1776.23 38.11 1718.18 69.97 1655.00 75.00 Z"
      />
    </g>
  </svg>
</template>

<script>
export default {
  props: {
    color: {
      default: "#c34f3d",
    },
  },
  data() {
    return {
      calculatedHeight: "75",
      viewportWidth: "1920",
      viewBox: "0 0 1920 75",
    };
  },
  mounted() {
    this.calculateHeight();
    window.addEventListener("resize", this.calculateHeight);
  },
  beforeDestroy() {
    // 在组件销毁前移除事件监听器
    window.removeEventListener("resize", this.calculateHeight);
  },
  methods: {
    calculateHeight() {
      this.viewportWidth = document.body.clientWidth;
      const originalAspectRatio = 1920 / 75;
      this.calculatedHeight = this.viewportWidth / originalAspectRatio;
      this.viewBox = `0 0 ${this.viewportWidth} ${this.calculatedHeight}`;
    },
  },
};
</script>

<style></style>
